<template>
  <div>
    <div class="admin">
      <div class="adminHead">
        <van-nav-bar
          left-text="管理员身份认证"
          left-arrow
          class="adminNav"
          @click-left="$router.back()"
        />
        <div class="header not-login">
          <div class="login-btn">
            <span class="avatar"><i class="iconfont icon-wode"></i></span>
            <span class="text" @click="$router.push('/login')">陈佳容</span>
          </div>
        </div>
      </div>
      <div class="admin-container">
        <div class="admin-main">
          <div class="clearfix">
            <span><div class="label_color"></div></span>
            <span class="label_text">请输入您的用户名和密码进行认证</span>
          </div>
          <van-form @submit="onSubmit">
            <van-field class="account" v-model="username" label="用户账户:" />
            <van-field v-model="password" type="password" label="用户密码:" />
          </van-form>
        </div>
        <div>
          <van-button
            block
            type="info"
            native-type="submit"
            class="footerBtn"
            @click="onSubmit"
            >提交认证</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit () {
      // 提交验证的函数
      console.log(1)
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-hairline--bottom::after {
  border-bottom-width: 0;
  // background-color: #3f51b5;
}
.admin {
  width: 752px;
  overflow: scroll;
  /deep/.van-nav-bar__content {
    height: 76px;
  }
  .adminHead {
    width: 752px;
    height: 412px;
    background-color: #3f51b5;
    /deep/.adminNav {
      .van-nav-bar__content {
        padding-top: 50px;
        background-color: #3f51b5;
      }
      .van-nav-bar__text {
        color: #fff;
        font-size: 32px;
      }
      .van-icon-arrow-left {
        color: #fff;
      }
    }
    .header {
      // border-top: solid #3f51b5;
      height: 284px;
      background-size: cover;
    }
    .not-login {
      display: flex;
      margin-top: -10px;
      background-color: #3f51b5;
      justify-content: center;
      align-items: center;
      .login-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: -40px;
        align-items: center;
      }
      .avatar {
        position: relative;
        width: 110px;
        height: 108px;
        margin-bottom: 15px;
        // background-color: #EEECEC ;
        border-radius: 50%;
        margin-bottom: 26px;
        background-color: rgba(238, 236, 236, 100);
        .iconfont {
          font-size: 52px;
          position: absolute;
          top: 24px;
          left: 30px;
          color: #979191;
        }
      }
      .text {
        font-size: 28px;
        color: #fff;
      }
    }
  }
  .admin-container {
    width: 750px;
    height: 962px;
    .admin-main {
      width: 684px;
      height: 810px;
      margin-left: 36px;
      margin-right: 30px;
      margin-top: -48px;
      background-color: #fff;
      border-radius: 8px 8px 8px 8px;
      z-index: 2;
      .clearfix {
        .label_color {
          display: inline-block;
          margin-right: 20px;
          margin-left: 66px;
          margin-top: 34px;
          width: 8px;
          height: 28px;
          background-color: rgba(63, 81, 181, 100);
        }
        .label_text {
          font-size: 28px;
          color: #101010;
        }
      }
      .account {
        margin-top: 68px;
      }
      .van-field {
        font-size: 26px;
        color: #101010;
      }
    }
    .footerBtn {
      position: absolute;
      left: 0;
      top: 1234px;
      height: 98px;
    }
  }
}
</style>
